<template>
  <div class="a" style="display: none">
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
    <p class="p-4">Hello 6.5</p>
    {{ msg }}
    <div>x:{{ x }} y:{{ y }}</div>
    <HelloWord />
    <UserComponent />
    <div class="m-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
    <i-mdi-account style="color: red; font-size: 1.5rem" />

    <div>
      <!-- 来自 Phosphor 图标库的基本锚点图标 -->
      <div class="i-ph-anchor-simple-thin" />
      <!-- 来自 Material Design 图标库的橙色警报 -->
      <div class="i-mdi-alarm text-orange-400" />
      <!-- 大型 Vue 标志 -->
      <div class="i-logos-vue text-3xl" />
      <!-- 亮色模式下的太阳，暗色模式下的月亮，来自 Carbon -->
      <button class="i-carbon-sun dark:i-carbon-moon" />
      <!-- Twemoji 的笑脸，悬停时变成泪水 -->
      <div
        class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy"
      />
      <!-- custome  icon -->
      <div class="i-ion:airplane" style="color: red; font-size: 1.5rem"></div>
    </div>
    this is hello word
    <!-- <ReloadPrompt></ReloadPrompt> -->
  </div>
  <div class="pb-15">
    <Swiper :items="homeStore.swipers" :height="36 * store.rate + 'rem'" />
    <Container>
      <!-- 标题 -->
      <div class="py-4">
        <div class="text-2xl">"</div>
        <div class="text-2xl font-bold pd-4">传播技术的种子 让分享带来价值</div>
        <div class="flex justify-between items-center">
          <div class="text-sm text-gray-400 w-2/3">
            多年来，toimc
            技术不忘初心，以建立行业服务标杆为目标，不断提升技术设计服务水平，帮助客户在互联网推广子自己的产品，服务，和品牌，为客户创造价值从而实现自身价值！
          </div>
          <div class="flex pl-20 w-1/3 justify-end items-center">
            <div class="w-1/2 h-[1px] bg-gray-500"></div>
            <div class="text-2xl relative ml-2 top-1">”</div>
          </div>
        </div>
      </div>
    </Container>
    <Container>
      <!-- for 遍历的内容： 课程 -->

      <div
        class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 w-full lt-sm:px-4"
      >
        <a
          v-for="item in homeStore.projects"
          :key="item.title"
          :href="item.url"
          class="flex group border transition-all hover:(bg-sky-500 shadow-lg text-white transform-translate-y--1)"
          target="_blank"
        >
          <Card
            class="w-full rounded-0 card"
            :icon="item.icon"
            :title="item.title"
            image-type="rounded"
            :subTitle="item.subTitle"
            boarder
          >
            <template #default>
              <div
                class="mx-4 flex items-center justify-between text-gray-500 mb-4 group-hover:(text-white)"
              >
                查看更多
                <div class="i-mdi:arrow-right-thin text-3xl"></div>
              </div>
            </template>
          </Card>
        </a>
      </div>
    </Container>
    <Container class="mt-5">
      <div class="py-4">
        <div class="text-2xl font-bold pb-4">官方课程</div>
        <div class="flex justify-between items-center">
          <div class="text-sm text-gray-400">
            toimc官方出品，经典内容设计，匠心细致，专业讲解。
          </div>
        </div>
      </div>
    </Container>
    <Container>
      <div
        class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 w-full lt-sm:px-4 p-4"
      >
        <a
          href="item.url"
          target="_blank"
          v-for="(item, index) in homeStore.courses"
          :key="index"
        >
          <Card
            class="w-full rounded-3 transition-all hover:(transform-translate-y--1 shadow-lg)"
            :image="item.image"
            image-type="rounded"
            :title="item.title"
            :sub-title="item.subTitle"
            border
          >
            <template #default>
              <div class="mx-4 flex items-center justify-between text-gray-500 mb-4">
                查看更多
                <div class="i-mdi:arrow-right-thin text-3xl ml-2"></div>
              </div>
            </template>
          </Card>
        </a>
      </div>
    </Container>
    <Container class="mt-5">
      <div class="pl-4">
        <div class="text-2xl font-bold pb-4">课程项目展示</div>
        <div class="flex justify-between items-center">
          <div class="text-sm text-gray-400">项目及架构展示，核心主流技术</div>
        </div>
      </div>
    </Container>
    <!--  用tailwindcss 表示padding-top:4px
   -->
    <Container class="w-full text-gray-400">
      <Swiper
        :items="items"
        :height="28 * store.rate + 'rem'"
        class="w-2/3"
        @change="handleSwiperChange"
      />

      <!-- @change="({ activeIndex }) => (selectItems = items[activeIndex])"
 和handleSwiperChange 函数的效果是一样的-->
      <div class="w-2/3 bg-coolgray-700 self-stretch flex flex-col justify-center px-4">
        <a :href="selectItems.url" v-if="selectItems" target="_blank">
          <div class="text-2xl font-bold pb-4 text-gray-100">{{ selectItems.title }}</div>
          <div class="text-sm">{{ selectItems.subTitle }}</div>
          <div class="flex items-center justify-between mb-4">查看更多</div>
          <div class="i-mdi:arrow-right-thin text-4xl"></div>
        </a>
      </div>
    </Container>
    <Container>
      <div class="text-2xl font-bold mt-4 p-4">合作伙伴</div>
    </Container>
    <Container class="px-4">
      <!-- <FreeSwiper :items="partners" class="h-35" /> -->
      <Swiper
        :items="partners"
        slides-per-view="4"
        height="150px"
        :freeMode="true"
        :space-between="50"
        loop
        :pagination="{ clickable: true }"
        :navigation="undefined"
        :pagination_hiden="true"
      >
        <template #default="{ item }">
          <div class="px-2 lt-sm:h-10 sm:h-20 w-full bg-gray-100">
            <div
              class="h-full w-full bg-no-repeat bg-contain bg-center p-4"
              :style="{
                'background-image': `url('${item.image}')`,
              }"
            ></div>
          </div>
        </template>
        <!-- methods1  -->
        <!-- <template #pagination>
          <div></div>
        </template> -->
      </Swiper>
    </Container>

    <Container class="py-4">
      <div class="w-2/3 h-[300px] sm:h-[400px]">
        <div class="grid grid-cols-4 grid-rows-3 h-full gap-4 p-4">
          <div class="border col-start-1 col-span-4 row-start-1 row-span-1">1</div>
          <div class="border col-start-1 col-span-2 row-start-2 row-span-2">2</div>
          <div class="border col-start-3 col-span-2 row-start-2 row-span-1">3</div>
          <div class="border col-start-3 col-span-1 row-start-3 row-span-1">4</div>
          <div class="border col-start-4 col-span-1 row-start-3 row-span-1">5</div>
        </div>
      </div>
      <div class="w-1/3 self-stretch flex flex-col justify-center">
        <div class="text-2xl font-bold pb-4">讲师团队</div>
        <div class="text-sm text-gray-400">
          <p>一线大厂、资深技术大牛10名</p>
          <p>技术专家不定期坐镇直播间</p>
          <p>前端、Java、Python工程师对应不同用户开发需求</p>
          <p>年薪百万不是梦，加入我们!</p>
        </div>
      </div>
    </Container>
  </div>
</template>

<script setup lang="ts">
import { registerSW } from "virtual:pwa-register";
const msg = ref("Hello World!");
import type { Swiper as SwiperType } from "swiper/types";
const target = useTemplateRef<HTMLDivElement>("target");
import type { SwiperItemType } from "@/components/types";
import bg from "@/assets/images/bg.png";
import { useThemeStore } from "@/store/useThemeStore";
import front from "@/assets/lessons/front-end.jpeg";
import nestjs from "@/assets/lessons/nestjs.jpeg";
import small from "@/assets/lessons/6.jpeg";
import project from "@/assets/lessons/project.jpeg";
import book from "@/assets/lessons/book.jpeg";
import blog from "@/assets/lessons/blog.png";
import { useHomeStore } from "@/stores/useHomeStore";
const store = useThemeStore();
const homeStore = useHomeStore();
// import { getHomeData } from "@/api/home";
// onBeforeMount(() => {
//   getHomeData().then((res) => {
//     console.log(res);
//   });
// });
const selectItems = ref();

onBeforeMount(() => {
  homeStore.fetchData();
  selectItems.value = homeStore.swipers[0];
});
const items: SwiperItemType[] = [
  {
    image: bg,
    title: "欢迎使用 XMFE1",
    subTitle: "这是一个基于 Vue 3 和 Vite 的前端脚手架1",
    url: "https://www.baidu.com",
  },
  {
    image: bg,
    title: "欢迎使用 XMFE2",
    subTitle: "这是一个基于 Vue 3 和 Vite 的前端脚手架2",
    url: "https://www.baidu.com",
  },
  {
    image: bg,
    title: "欢迎使用 XMFE3",
    subTitle: "这是一个基于 Vue 3 和 Vite 的前端脚手架3",
    url: "https://www.baidu.com",
  },
  {
    image: bg,
    title: "欢迎使用 XMFE4",
    subTitle: "这是一个基于 Vue 3 和 Vite 的前端脚手架4",
    url: "https://www.baidu.com",
  },
  {
    image: bg,
    title: "欢迎使用 XMFE5",
    subTitle: "这是一个基于 Vue 3 和 Vite 的前端脚手架5",
    url: "https://www.baidu.com",
  },
];
const partners = ref(
  [
    "https://wayearn.static.toimc.com/partner/logo1.png",
    "https://wayearn.static.toimc.com/partner/logo2.png",
    "https://wayearn.static.toimc.com/partner/logo8.png",
    "https://wayearn.static.toimc.com/partner/logo5.png",
    "https://wayearn.static.toimc.com/partner/logo6.png",
    "https://wayearn.static.toimc.com/partner/logo7.png",
  ].map((item) => {
    return {
      image: item,
    };
  })
);
const { x, y } = useMouseInElement(target);
const projects = [
  {
    title: "前端高级工程师 （大前端）",
    subTitle: "“技术成长&职业破局”双高体系，深度打通“全栈+全流程+多端+提效+AI赋能”",
    url: "https://class.immoc.com/sale/fesenior",
    icon: "i-mdi:web",
  },
  {
    title: "前端高级工程师 （大前端）",
    subTitle: "“技术成长&职业破局”双高体系，深度打通“全栈+全流程+多端+提效+AI赋能”",
    url: "https://class.immoc.com/sale/fesenior",
    icon: "i-mdi:web",
  },
  {
    title: "前端高级工程师 （大前端）",
    subTitle: "“技术成长&职业破局”双高体系，深度打通“全栈+全流程+多端+提效+AI赋能”",
    url: "https://class.immoc.com/sale/fesenior",
    icon: "i-mdi:web",
  },
  {
    title: "前端高级工程师 （大前端）",
    subTitle: "“技术成长&职业破局”双高体系，深度打通“全栈+全流程+多端+提效+AI赋能”",
    url: "https://class.immoc.com/sale/fesenior",
    icon: "i-mdi:web",
  },
  {
    title: "前端高级工程师 （大前端）",
    subTitle: "“技术成长&职业破局”双高体系，深度打通“全栈+全流程+多端+提效+AI赋能”",
    url: "https://class.immoc.com/sale/fesenior",
    icon: "i-mdi:web",
  },
  {
    title: "前端高级工程师 （大前端）",
    subTitle: "“技术成长&职业破局”双高体系，深度打通“全栈+全流程+多端+提效+AI赋能”",
    url: "https://class.immoc.com/sale/fesenior",
    icon: "i-mdi:web",
  },
  {
    title: "前端高级工程师 （大前端）",
    subTitle: "“技术成长&职业破局”双高体系，深度打通“全栈+全流程+多端+提效+AI赋能”",
    url: "https://class.immoc.com/sale/fesenior",
    icon: "i-mdi:web",
  },
  {
    title: "前端高级工程师 （大前端）",
    subTitle: "“技术成长&职业破局”双高体系，深度打通“全栈+全流程+多端+提效+AI赋能”",
    url: "https://class.immoc.com/sale/fesenior",
    icon: "i-mdi:web",
  },
];
const lessons = [
  {
    title: "前端高级工程师（大前端）",
    subTitle: "技术成长&值也颇具“双高体系，深度打通”全栈 + 全流程 + 多端+ 提效+AI赋能",
    url: "https://class.imooc.com/sale/fesenior",
    image: front,
  },
  {
    title: "前端高级工程师（大前端）",
    subTitle: "技术成长&值也颇具“双高体系，深度打通”全栈 + 全流程 + 多端+ 提效+AI赋能",
    url: "https://class.imooc.com/sale/fesenior",
    image: nestjs,
  },
  {
    title: "前端高级工程师（大前端）",
    subTitle: "技术成长&值也颇具“双高体系，深度打通”全栈 + 全流程 + 多端+ 提效+AI赋能",
    url: "https://class.imooc.com/sale/fesenior",
    image: small,
  },
  {
    title: "前端高级工程师（大前端）",
    subTitle: "技术成长&值也颇具“双高体系，深度打通”全栈 + 全流程 + 多端+ 提效+AI赋能",
    url: "https://class.imooc.com/sale/fesenior",
    image: project,
  },
  {
    title: "前端高级工程师（大前端）",
    subTitle: "技术成长&值也颇具“双高体系，深度打通”全栈 + 全流程 + 多端+ 提效+AI赋能",
    url: "https://class.imooc.com/sale/fesenior",
    image: book,
  },
  {
    title: "前端高级工程师（大前端）",
    subTitle: "技术成长&值也颇具“双高体系，深度打通”全栈 + 全流程 + 多端+ 提效+AI赋能",
    url: "https://class.imooc.com/sale/fesenior",
    image: blog,
  },
];
onMounted(() => {
  registerSW({
    immediate: true,
    // onNeedRefresh() {
    //   console.log("需要刷新");
    // },
    onRegisteredSW(url, registration) {
      console.log("url", url);
      console.log("registration", registration);
      setInterval(() => {
        registration?.update();
      }, 5000); // 每5秒更新一次
    },
  });
});

function handleSwiperChange(e: SwiperType) {
  const index = e.activeIndex;
  console.log("🚀 ~ handleSwiperChange ~ index:", index);
  selectItems.value = homeStore.swipers[index];
}
</script>

<style scoped lang="scss">
:deep(.card) {
  &:hover {
    p {
      color: #fff;
    }
  }
}
</style>
<route lang="yaml">
meta:
  layout: default
</route>
